<template>
  <div class="app-container">
    <el-card>
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="名称">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="reset()">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getList"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-button
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="addregoin()"
        >添加IP账号</el-button
      >
      <el-table
        :data="tableData.data"
        border
        size="small"
        style="margin-top: 20px"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <img
              :src="scope.row.icon"
              style="width: 50px; height: 50px; border-radius: 50%"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="officialAuthnName"
          label="官方认证名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          align="center"
        ></el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="scope.row.status == 1 ? 'success' : 'danger'"
              disable-transitions
              >{{ scope.row.status == 1 ? "启用" : "禁用" }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="editregoin(scope.row)"
              >编辑</el-button
            >
            <el-button size="mini" type="text" @click="deleteregoin(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </el-card>

    <el-dialog
      :title="detailForm.id ? '编辑IP账号' : '新增IP账号'"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="700px"
    >
      <el-form
        :model="detailForm"
        :rules="detailRules"
        ref="detailForm"
        label-width="120px"
        size="small"
      >
        <el-form-item label="头像：" prop="icon">
          <single-upload
            uploadType="2"
            @uploadSucces="uploadSucces"
            v-model="detailForm.icon"
          >
            <div class="uploadPic" v-if="!detailForm.icon">
              <i
                style="font-size: 40px; color: #ccc; font-weight: bold"
                class="el-icon-plus"
              ></i>
            </div>
          </single-upload>
        </el-form-item>

        <el-form-item label="官方认证名称：" prop="officialAuthnName">
          <el-input
            maxlength="6"
            style="width: 500px"
            v-model="detailForm.officialAuthnName"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item label="备注：" >
          <el-input
            maxlength="80"
            type="textarea"
            style="width: 500px;height: 100px"
            show-word-limit
            v-model="detailForm.note"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-radio-group v-model="detailForm.status">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label-width="120px">
          <div>
            <el-button
              style="width: 100px"
              type="primary"
              @click="onSubmit('detailForm')"
              >确定</el-button
            >
            <el-button style="width: 100px" @click="handleClose()"
              >取消</el-button
            >
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOfficialAccountList,
  addOfficialAccount,
  editOfficialAccount,
  deleteOfficialAccount
} from "@/api/article";
import SingleUpload from "@/components/Upload/uploadOne";
import { status } from "nprogress";
export default {
  components: {
    SingleUpload
  },
  name: "officialAccount",
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        name: "",
        status: "" //启用状态：0->禁用；1->启用
      },
      tableData: {
        data: [],
        total: 0
      },
      listLoading: false,
      detailForm: {
        officialAuthnName: "",
        icon: "",
        note: "",
        status: 1
      },
      dialogVisible: false,
      detailRules: {
        officialAuthnName: [
          { required: true, message: "请输入官方认证名称", trigger: "blur" }
        ],
        icon: [{ required: true, message: "请上传头像", trigger: "blur" }],
        // phone: [
        //   { required: true, message: "请输入电话", trigger: "blur" },
        //   {
        //     pattern: /^1[3456789]\d{9}$/,
        //     message: "请输入正确的手机号码",
        //     trigger: "blur"
        //   }
        // ],
        note: [{ required: true, message: "请输入备注", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    deleteregoin(v) {
      this.$confirm("确定删除该IP账号吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteOfficialAccount(v.id)
          .then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          })
          .catch(err => {
            console.log(err);
          });
      });
    },
    handleClose() {
      this.detailForm = {
        officialAuthnName: "",
        icon: "",
        phone: "",
        note: "",
        status: 1
      };
      this.$refs.detailForm.resetFields();
      this.dialogVisible = false;
    },
    editregoin(row) {
      this.detailForm = Object.assign({}, row);
      this.dialogVisible = true;
    },
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.detailForm.id) {
            delete this.detailForm.nickname;
            editOfficialAccount(this.detailForm)
              .then(res => {
                this.$message({
                  message: "编辑成功",
                  type: "success"
                });
                this.dialogVisible = false;
                this.getList();
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            addOfficialAccount(this.detailForm).then(res => {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.handleClose();
              this.getList();
            });
          }
        }
      });
    },
    uploadSucces() {
      this.$refs.detailForm.validateField("icon");
    },
    addregoin() {
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    reset() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        name: "",
        status: "" //启用状态：0->禁用；1->启用
      };
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getOfficialAccountList(this.searchForm)
        .then(res => {
          console.log(res);
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style scoped lang="scss">
.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
/deep/ .el-textarea__inner {
  height: 100px;
}
</style>
